<template>
  <div class="task-view p-6 bg-gray-100 min-h-screen">
    <div class="max-w-4xl mx-auto">
      <h1 class="text-3xl font-bold text-amber-700 mb-6">任务管理系统</h1>
      
      <div class="bg-white rounded-lg shadow-md p-6 mb-6">
        <h2 class="text-xl font-semibold text-gray-800 mb-4">发布新任务</h2>
        <form @submit.prevent="createTask" class="space-y-4">
          <div>
            <label class="block text-gray-700 mb-2">任务标题</label>
            <input 
              v-model="newTask.title" 
              type="text" 
              class="w-full p-2 border rounded focus:ring-2 focus:ring-amber-500"
              required
            >
          </div>
          <div>
            <label class="block text-gray-700 mb-2">任务描述</label>
            <textarea 
              v-model="newTask.description" 
              rows="4"
              class="w-full p-2 border rounded focus:ring-2 focus:ring-amber-500"
              required
            ></textarea>
          </div>
          <div>
            <label class="block text-gray-700 mb-2">奖励原石</label>
            <input 
              v-model.number="newTask.reward" 
              type="number" 
              min="0"
              class="w-full p-2 border rounded focus:ring-2 focus:ring-amber-500"
              required
            >
          </div>
          <button 
            type="submit"
            class="px-4 py-2 bg-amber-600 text-white rounded hover:bg-amber-700 transition"
          >
            发布任务
          </button>
        </form>
      </div>

      <div class="bg-white rounded-lg shadow-md p-6">
        <h2 class="text-xl font-semibold text-gray-800 mb-4">已发布任务</h2>
        <div v-if="tasks.length === 0" class="text-gray-500">
          暂无任务
        </div>
        <div v-else class="space-y-4">
          <div 
            v-for="task in tasks" 
            :key="task.id"
            class="border-b pb-4 last:border-b-0"
          >
            <div class="flex justify-between items-start">
              <div>
                <h3 class="font-medium text-lg text-gray-800">{{ task.title }}</h3>
                <p class="text-gray-600 mt-1">{{ task.description }}</p>
              </div>
              <span class="text-amber-600 font-bold">{{ task.reward }} 原石</span>
            </div>
            <div class="flex justify-end mt-2 space-x-2">
              <button 
                @click="editTask(task)"
                class="px-3 py-1 text-sm bg-blue-100 text-blue-700 rounded hover:bg-blue-200"
              >
                编辑
              </button>
              <button 
                @click="deleteTask(task.id)"
                class="px-3 py-1 text-sm bg-red-100 text-red-700 rounded hover:bg-red-200"
              >
                删除
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useTaskStore } from '../stores/task'

const taskStore = useTaskStore()
const tasks = ref([])
const newTask = ref({
  title: '',
  description: '',
  reward: 0
})

onMounted(async () => {
  await taskStore.fetchTasks()
  tasks.value = taskStore.tasks
})

const createTask = async () => {
  await taskStore.addTask(newTask.value)
  tasks.value = taskStore.tasks
  newTask.value = { title: '', description: '', reward: 0 }
}

const editTask = (task) => {
  // 实现编辑逻辑
}

const deleteTask = async (id) => {
  await taskStore.removeTask(id)
  tasks.value = taskStore.tasks
}
</script>

<style scoped>
.task-view {
  background-color: #f8f4e9;
}
</style>